{extend name="lib/common_list" /}
{block name="title"}{/block}
{block name="css"}{/block}
{block name="javascript"}
<script>
    /**
     * 加载表格
     */
    function initTable() {
        //先销毁表格
        $('#tb').bootstrapTable('destroy');
        //初始化表格,动态从服务器加载数据
        $("#tb").bootstrapTable({
            method: "Post",  //使用Post请求到服务器获取数据
            url: "{:url('article_record/getList')}", //获取数据的Servlet地址
            striped: true,  //表格显示条纹
            pagination: true, //启动分页
            pageSize: 15,  //每页显示的记录数
            pageNumber: 1, //当前第几页
            pageList: [15, 50],  //记录数可选列表
            search: false,  //是否启用查询
            sortable: true, //是否启用排序
            sortOrder: "desc", //排序方式
            //showColumns: true,  //显示下拉框勾选要显示的列
            //showRefresh: true,  //显示刷新按钮
            //sortName: "PullTime",
            sidePagination: "server", //表示服务端请求
            //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
            //设置为limit可以获取limit, offset, search, sort, order
            queryParamsType: "limit",
            contentType: "application/x-www-form-urlencoded",
            queryParams: function queryParams(params) {   //设置查询参数
                var param = {
                    limit: params.limit,
                    offset: params.offset,
                    sortName: params.sort,
                    sortOrder: params.order,
                    keywords: $("input[name=keywords]").val(),
                    applet_app_id: $("#applet_app_id").val(),
                    //sex: $("select[name=sex]").val(),
                };
                return param;
            },
            onLoadSuccess: function () {  //加载成功时执行

            },
            onLoadError: function () {  //加载失败时执行
                layer.msg("加载数据失败", { time: 1500, icon: 2 });
            },
            rowStyle: function (row, index) {
                var strclass = "";
                return { classes: strclass }
            }
        });
    }

    $(document).ready(function () {
        //调用函数，初始化表格
        initTable();
        //点击查询按钮
        $("#search").bind("click", initTable);
    });

    function initAcTable() {
        initTable();
    }

    /**
     * 详情页
     */
    var layer_view_index;
    function view(id) {
        layer_view_index = layer.open({
            type:2,
            title:'浏览详情',
            area:['70%', '90%'],
            content:"{:url('article_record/view')}?id=" +id
        })
    }

    function appletValue(){
        var applet_app_id = $('#applet_name').children('option:selected').attr('applet_app_id');
        $('#applet_app_id').val(applet_app_id);
    }

    // 刷新当前一页表格
    function refreshtb() {
        $('#tb').bootstrapTable('refresh');
    }
</script>
{/block}
{block name="content"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5></h5>
                </div>
                <div class="col-sm-2 m-b-xs">
                    <span>
                        <!--<button type="button" class="btn btn-primary btn-sm" id="btnAdd"><i class="glyphicon glyphicon-plus"></i> 新增</button>-->
                    </span>
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-2 col-sm-offset-2">
                            <div class="input-group">
                                <select class="form-control" name="applet_name" id="applet_name" onchange="appletValue()">
                                    <option value="">请选择小程序 .....</option>
                                    {volist name="applet_list" id="v"}
                                    <option value="{$v.name}"  applet_app_id = "{$v.id}">{$v.name}</option>
                                    {/volist}
                                </select>
                            </div>
                        </div>
                        <div>
                            <input type="hidden" id="applet_app_id" />
                        </div>

                        <div class="col-sm-2 col-sm-offset-2">
                            <div class="input-group">
                                <span class="input-group-btn">
                                    <input type="text" placeholder="请输入搜索关键字" class="input-sm form-control" id="keywords" name="keywords">
                                    <button type="button" class="btn btn-sm btn-primary" id="search">搜索</button>
                                </span>
                            </div>
                        </div>
                        <span id="refresh" class="fa fa-refresh fa-spin" title="刷新" onclick="javascript:$('#tb').bootstrapTable('refresh')"></span>
                    </div>
                    <table data-toggle="table" id="tb" data-pagination="true">
                        <thead>
                        <tr>
                            <!--<th data-align="center" data-field="article_cate_name">类别</th>-->
                            <th data-align="center" data-field="article_title">美文标题</th>
                            <th data-align="center" data-field="applet_app_id">小程序APP ID</th>
                            <th data-align="center" data-field="open_id">微信OPEN ID</th>
                            <th data-align="center" data-field="nick_name">昵称</th>
                            <th data-align="center" data-field="created_time" data-sortable="true">添加时间</th>
                            <!--<th data-align="center" data-formatter="operateFormatter">操作</th>-->
                        </tr>
                        </thead>

                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}